<template>
  <lc-crud
    ref="curd"
    :default-sort="{
      prop: 'sort',
      order: 'ascending'
    }"
    :st-moda="'tree-table'"
    :operator="operator"
    :column="column"
    :record="record"
    :search="search"
    :option="option"
    :noCache="true"
    :expand-change="expandChange"
    :no-page="true"
    data="/lc-system/menu?parentId=noParent"
  />
</template>
<script setup lang="ts" name="sys-menu">
import { TCrudComponent, TRecord } from "@/components/crud/interface";
import {
  ITableColumn,
  STExposeComponent,
  TOporaterOption
} from "@/components/st/interface";
import LcCrud from "@/components/crud/crud.vue";
import { ref } from "vue";
import {
  InputUI,
  RadioUI,
  SwitchUI,
  TextAreaUI
} from "@/components/sf/interface";
import { NzSafeAny } from "@/components/sf/type";
import { Helper } from "@/core/helper/helper.service";
import Permission from "./permission/index.vue";
import { useAclHooks } from "@/core/pinia/store/acl.store";
defineOptions({
  name: "menus"
});
const curd = ref<TCrudComponent>(null);
const acls = useAclHooks();
const expandChange = (res: Record<string, NzSafeAny>, _: number) => {
  return `/lc-system/menu?parentId=${res.id}`;
};
const search = {
  properties: {
    text: {
      title: "菜单名称",
      ui: {
        placeholder: "请输入菜单名称"
      }
    }
  }
};
const operator = { delHide: true } as TOporaterOption;
const option = {
  title: "菜单"
};
const record = {
  schema: {
    properties: {
      parent: {
        type: "string",
        title: "上级",
        ignore: true,
        ui: {
          placeholder: "请输入名称",
          grid: {
            span: 24
          },
          disabled: true,
          visibleIf: {
            parent: (val: any) => !!val
          },
          preFormat: (val: any) => {
            return val?.text;
          }
        }
      },
      text: {
        type: "string",
        title: "名称",
        ui: {
          placeholder: "请输入名称",
          grid: {
            span: 24
          }
        }
      },
      icon: {
        type: "string",
        title: "图标",
        ui: {
          placeholder: "请输入菜单图标",
          grid: {
            span: 12
          }
        }
      },
      sort: {
        type: "number",
        title: "序号",
        ui: {
          placeholder: "序号",
          grid: {
            span: 12
          }
        },
        default: 1
      },
      isLeaf: {
        title: "叶子",
        ui: {
          widget: "switch",
          inlinePrompt: true,
          activeText: "是",
          inactiveText: "否"
        } as SwitchUI,
        default: false
      },
      moda: {
        title: "模式",
        ui: {
          widget: "radio",
          items: [
            { label: "ROUTER(路由)", value: "ROUTER" },
            { label: "IFRAME(iframe嵌套)", value: "IFRAME" },
            { label: "LINK(外链)", value: "LINK" }
          ],
          visibleIf: {
            isLeaf: (val: boolean) => val
          },
          moda: "button"
        } as RadioUI,
        default: "ROUTER"
      },
      router: {
        type: "string",
        title: "路由",
        ui: {
          placeholder: "请输入路由地址",
          showRequired: true,
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => val !== "LINK"
          }
        }
      },
      path: {
        type: "string",
        title: "视图",
        ui: {
          placeholder: "请输入视图地址",
          showRequired: true,
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => val === "ROUTER"
          },
          prefixIcon: "@/views/",
          suffixicon: "/index.vue"
        } as InputUI
      },

      frame: {
        type: "string",
        title: "地址",
        format: "url",
        ui: {
          placeholder: "请输入嵌套地址",
          showRequired: true,
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => val === "IFRAME"
          }
        }
      },
      keepAlive: {
        title: "缓存",
        ui: {
          widget: "radio",
          items: [
            { label: "是", value: true },
            { label: "否", value: false }
          ],
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => ["ROUTER"].includes(val)
          },
          border: true
        },
        default: true
      },
      title: {
        title: "标题",
        ui: {
          placeholder: "请输入标题",
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => ["ROUTER", "IFRAME"].includes(val)
          }
        }
      },
      api: {
        type: "string",
        title: "接口",
        ui: {
          placeholder: "请输入后端模块接口",
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => val === "ROUTER"
          }
        }
      },
      link: {
        type: "string",
        title: "外链",
        format: "url",
        ui: {
          placeholder: "请输入外部链接",
          showRequired: true,
          visibleIf: {
            isLeaf: (val: boolean) => val,
            moda: (val: string) => val === "LINK"
          }
        }
      },

      forbidden: {
        title: "禁用",
        ui: {
          widget: "radio",
          items: [
            { label: "否", value: false },
            { label: "是", value: true }
          ],
          border: true
        },
        default: false
      },
      hideInBreadcrumb: {
        type: "boolean",
        title: "面包屑",
        ui: {
          widget: "radio",
          items: [
            { label: "显示", value: false },
            { label: "隐藏", value: true }
          ],
          border: true,
          visibleIf: {
            isLeaf: (val: boolean) => !val
          }
        },
        default: false
      },
      remark: {
        type: "string",
        title: "备注",
        ui: {
          widget: "textarea",
          maxLength: 300,
          placeholder: "备注"
        } as TextAreaUI
      }
    },
    required: [
      "parent",
      "text",
      "sort",
      "icon",
      "router",
      "frame",
      "link",
      "path",
      "keepAlive",
      "isLeaf",
      "moda"
    ]
  }
} as TRecord;
const column = [
  {
    label: "序号",
    width: 80,
    sortable: true,
    prop: "sort"
  },
  { label: "图标", prop: "icon", type: "icon", width: 80 },
  { label: "名称", prop: "text" },
  {
    label: "是否隐藏面包屑",
    prop: "hideInBreadcrumb",
    type: "tags",
    tags: {
      true: { text: "隐藏", type: "warning" },
      false: { text: "显示", type: "success" }
    }
  },
  {
    label: "是否禁用",
    prop: "forbidden",
    type: "tags",
    tags: {
      true: { text: "禁用", type: "danger" },
      false: { text: "启用", type: "" }
    }
  },
  {
    prop: "createTime",
    type: "date",
    sortable: true,
    label: "创建"
  },
  {
    prop: "remark",
    showOverflowTooltip: true,
    label: "备注"
  },
  {
    label: "操作",
    width: 300,
    acl: {
      points: acls.getAclArray("patch", "permission_get", "delete", "post"),
      mode: "oneOf"
    },
    buttons: [
      {
        text: "编辑",
        icon: "ant-design:edit-filled",
        acl: { points: [acls.getMenuAcl("patch")] },
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value?.update(data).subscribe(() => st.reset())
      },
      {
        text: "查看权限",
        icon: "mingcute:safety-certificate-fill",
        divider: "dashed",
        acl: { points: [acls.getMenuAcl("permission_get")] },
        iif: (item: Record<string, NzSafeAny>) => item.isLeaf,
        click: (data: NzSafeAny) => addPermission(data?.id)
      },
      {
        text: "添加下级",
        icon: "ant-design:plus-square-filled",
        divider: "dashed",
        acl: { points: [acls.getMenuAcl("post")] },
        iif: (item: Record<string, NzSafeAny>) => !item.isLeaf,
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value
            ?.add(
              {
                parentId: data.id,
                parent: {
                  text: data.text
                }
              },
              "下级菜单"
            )
            .subscribe(() => st.resetChild(data))
      },
      {
        text: "更多",
        divider: "dashed",
        acl: { points: acls.getAclArray("delete"), mode: "oneOf" },
        children: [
          {
            text: "删除",
            type: "del",
            acl: { points: [acls.getMenuAcl("delete")] },
            icon: "ant-design:delete-filled",
            click: (data: NzSafeAny, st: STExposeComponent) =>
              curd.value?.delOne(data?.id).subscribe(() => st.reset())
          }
        ]
      }
    ]
  }
] as ITableColumn[];

const addPermission = (id: string) => {
  Helper.showDrawer({
    title: "添加菜单权限点",
    i: { menuId: id },
    footer: false,
    size: 1100,
    component: Permission,
    popOption: {
      closeOnPressEscape: true,
      closeOnClickModal: true
    }
  }).subscribe(() => {
    console.log(666666);
  });
};
</script>
@/components/st/interfaces @/components/crud/interfaces
@/components/sf/interfaces @/components/sf/types
